<template>
  <div class="role-container">
    <div>
      <!-- <el-button type="primary" size="medium" @click="showDialog = true">添加角色</el-button> -->
      <el-button v-permission="'add-role'" type="primary" size="medium" @click="showDialog = true">添加角色</el-button>
    </div>
    <!-- 数组里面有多少列，取决于什么？-->
    <!--  取决于tab1e里面有多少个col开头的那个元素-->
    <div class="rc-1">
      <el-table
        :data="roleList"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="角色"
          width="180"
        >
          <template v-slot="{ row }">
            <div v-if="row.isEdit">
              <el-input v-model="editForm.name" />
            </div>
            <div v-else>{{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="启用"
          width="180"
        >
          <!-- 如果仅仅通过po来展示值，那么只能展示后端接口返回的数据，要想自定义结构，就需要使用作用域插槽
<template slot-scope="slotScope">--
在tablel的列里面，插槽的值就是个对象，里面有个row属性，表当当前这一行的数据 -->
          <!-- 表格有多少行 : 取决于绑定到e1-tab1e上面的那个数组的长度。这个数组有多少个元素，这个表格就会渲染多少行 -->
          <template slot-scope="{row}">
            <div v-if="row.isEdit">
              <el-switch
                v-model="editForm.state"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
              />
            </div>
            <div v-else @click="test(row)">{{ row.state == 1 ? '已启用' : '未启用' }}， {{ row.isEdit }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
        >
          <!-- vue3的插槽v-slot 新语法,只能放在标签 template上面 -->
          <!-- <template v-slot="{ row }"> -->
          <div slot-scope="{row}">
            <div v-if="row.isEdit">
              <el-input v-model="editForm.description" />
            </div>
            <div v-else>{{ row.description }}</div>
          </div>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.isEdit">
              <el-button type="primary" size="small" @click="editSubmitTmp">确定</el-button>
              <el-button size="small" @click="row.isEdit = false">取消</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="small" @click="assignPermisionTmp(row.id)">分配权限</el-button>
              <el-button type="text" size="small" @click="editRowTmp(row)">编辑</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="confirm(row.id)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
              <!-- <el-button type="text" size="small" @click="delRoleTmp(row.id)">删除</el-button> -->
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="rc-2">
      <!-- total:总条数  page-size:每页显示条目个数  current-page:当前页码 current-change:改变当前 layout:组件分布-->
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        :current-page="form.page"
        :page-size="form.pagesize"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="新增角色" :visible.sync="showDialog" @close="close">
      <el-form ref="ruleForm" :model="addForm" :rules="rules">
        <el-form-item label="角色名称" label-width="150px" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="启用" label-width="150px">
          <el-switch
            v-model="addForm.state"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          >
            <template v-slot="{ row }">
              <div v-if="row.isEdit">
                <el-input v-model="editForm.name" />
              </div>
              <div v-else>{{ row.name }}</div>
            </template>

          </el-switch></el-form-item>
        <el-form-item label="角色描述" label-width="150px" prop="description">
          <el-input v-model="addForm.description" />
        </el-form-item>
        <el-form-item label-width="150px">
          <el-button type="primary" @click="submitForm">登录</el-button>
          <el-button @click="showDialog = false">取 消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <!-- 给角色分配权限的弹出框 -->
    <el-dialog
      v-if="dialogVisible"
      title="分配权限"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- props里面就是 告诉tree组件，页面上要展示那个字段， 默认是label字段，是否有子节点通过children去看 -->
      <!-- 级联选择器， 也是要这么配置，就是页面显示的字段要自己配置一下 -->
      <el-tree ref="tree" :data="treeList" node-key="id" show-checkbox default-expand-all :props="{label: 'name', children: 'children'}" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="assingPermissionSubmitTmp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- <div>
      <p v-if="123 > 1">123</p>
      <p v-if="123 > 1">456</p>
      <template v-if="123 > 1">
        <p>123</p>
        <p>456</p>
      </template>
      <p v-else>789</p>
    </div> -->
  <!-- 由己已经写过的页面，element-ui官网，百度 -->
</template>

<script>

import { getSysRoleRuquest, addSysRoleRuquest, deleteRoleRuquest, updateRoleRuquest, getRoleDetailRequest, assignPremRequest } from '@/api/role'
import { getPermissionListRequest } from '@/api/permission'
import { transformListToTree } from '@/utils'
export default {
  name: 'Role',
  data() {
    return {
      roleList: [],
      form: {
        page: 1,
        pagesize: 3
      },
      total: 0,
      //! 弹框的显示隐藏
      showDialog: false,
      addForm: {
        // 角色名称
        name: '',
        // 角色描述
        description: '',
        // 角色状态，默认是启用的,1启用状态0未启用
        state: 1
      },
      //! 下面是编辑/修改的对象
      editForm: {
        name: '',
        description: '',
        state: 1
      },
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 20, message: '角色名称为2-16位之间', trigger: 'blur' }
        ],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' },
          { min: 2, max: 20, message: '描述位数在2-20位', trigger: 'blur' }]
      },
      dialogVisible: false,
      treeList: [],
      // null值的使用， 还要一些 闭包占用内存的问题，闭包不会自动销毁，所以如果程序想写的好一些，优化一些
      // 一个闭包使用完了以后，将那个变量， 手动赋值为null，就会清空这个变量，释放它占用的内存地址，就用null去赋值
      currentRoleId: null
    }
  },
  created() {
    this.getSysRoleList()
  },
  methods: {
    // 获取-分页查询角色列表
    async getSysRoleList() {
      const res = await getSysRoleRuquest(this.form)
      // console.log(res)
      this.roleList = res.data.rows
      this.total = res.data.total
      // !编辑的展示切换
      this.roleList.forEach(item => {
        // 给每一个对象添加一个isDeit属性,用来控制每一行是否是 编辑状态还是 展示数据状态
        // 一定要有一个思维, 数据驱动视图,页面上的变化,最终都是有数据控制的,例如有10行数据没有
        // 编辑和展示的 状态切换
        // item.isEdit = false
        // Vue.set(xxxx) 这句话是在 js文件里面
        this.$set(item, 'isEdit', false)
      })
    },
    handleCurrentChange(val) {
      console.log(val)
      this.form.page = val
      this.getSysRoleList()
    },
    // 清空
    close() {
      // 关闭弹窗
      this.showDialog = false
      this.$refs.ruleForm.resetFields()
    },
    //! 新增登录
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // 只要进入了这个if分支，表示页面所有校验通过
          console.log(this.addForm)
          await addSysRoleRuquest(this.addForm)
          // 添加成功以后，通过经验我们知道，1.关闭弹窗2.友好的提示3.重新渲染（刷新页面）
          // 关闭弹窗
          this.close()
          // 友好提示
          this.$message.success({ message: '新增成功' })
          // 添加成功以后，刷新页面之前，将页码值修改为1，让页面刷新的时候，回到第一页
          this.form.page = 1
          // 如果为了提升用户体验，可以立马看到最新我自已添加的数据，就要去到最后一页(作业)
          // 重新渲染
          this.getSysRoleList()
        }
      })
    },
    // 删除
    // async delRoleTmp(id) {
    // console.log(id)

    // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //   confirmButtonText: '确定',
    //   cancelButtonText: '取消',
    //   type: 'warning'
    // }).then(() => {
    // console.log(id)
    //   this.$message({
    //     type: 'success',
    //     message: '删除成功!'
    //   })
    // }).catch(() => {
    //   this.$message({
    //     type: 'info',
    //     message: '已取消删除'
    //   })
    // })
    // 第二种删除
    // },
    async confirm(id) {
      // console.log(111)
      try {
        await deleteRoleRuquest(id)
        // 删除成功提醒
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 当我们去删除最后一页的时候，当最后一页又只有一条数据的时候，就会有bug
        if (this.roleList.length === 1) {
          // 只要有-- 就会有负数
          if (this.form.page > 1) {
            this.form.page--
          }
        }
        // 刷新页面
        this.getSysRoleList()
      } catch (error) {
        console.log('删除成功接口报错')
      }
    },
    // ! 编辑按键事件
    editRowTmp(row) {
      console.log(row)
      // eslint-disable-next-line no-return-assign
      this.roleList.forEach(item => item.isEdit = false)
      row.isEdit = true
      // 下面不能直接写等号
      // row就几个普通数据类型,只有一层数据的拷贝 可以用展开运算符,若多层对象,就需要使用深拷贝
      this.editForm = { ...row }
      console.log(row)
    },
    //! 编辑请求
    async editSubmitTmp() {
      await updateRoleRuquest(this.editForm)
      this.$message.success({ message: '更新成功' })
      this.form.page = 1
      this.getSysRoleList()
    },
    assignPermisionTmp(id) {
      this.currentRoleId = id
      this.dialogVisible = true
      this.getPermissionList()
    },
    async getPermissionList() {
      const res = await getPermissionListRequest()
      // console.log(res)
      this.treeList = transformListToTree(res.data, 0)
      // console.log(this.treeList)
      // 获取改角色已经有的权限
      const res1 = await getRoleDetailRequest(this.currentRoleId)
      console.log(res1)

      this.$refs.tree.setCheckedKeys(res1.data.permIds)
    },
    async  assingPermissionSubmitTmp() {
      this.dialogVisible = false
      // 获取到用户勾选了那几个key
      // console.log(this.$refs.tree.getCheckedKeys())
      await assignPremRequest({
        id: this.currentRoleId,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.$message.success({ message: '分配权限成功' })
      // this.getRoleList()
    }
  }
}

</script>

<style lang="scss" scope>
.role-container{
  margin: 30px 50px;
  .rc-1{
    margin: 20px 0;
  }
  .rc-2{
    text-align: right;
  }
}
</style>
